<template>
  <!-- 标签导航栏部分 -->
  <div class="f-tag-list" :style="{ left: $store.state.asideWidth }">
    <!-- el-tabs 实现标签页 -->
    <el-tabs
      v-model="activeTab"
      type="card"
      class="flex-1"
      @tab-remove="removeTab"
      style="min-width: 100px"
      @tab-change="changeTab"
    >
      <!-- 遍历 tabList 渲染标签页 -->
      <!-- <el-tab-pane
        :closable="item.path != '/home'"
        v-for="item in tabList"
        :key="item.path"
        :label="truncateLabel(item.title)"
        :name="item.path"
        :title="item.title"
      >
      </el-tab-pane> -->
      <!-- 使用具名 slot "label" 来定义标签，并结合 el-tooltip -->
    <el-tab-pane
    v-model="activeTab"
      :closable="item.path !== '/'"
      v-for="item in tabList"
      :key="item.path"
      :name="item.path"
    >
      <template #label>
        <!-- 只有当 title 的长度大于 5 时才使用 el-tooltip -->
        <el-tooltip v-if="item.title.length > 5" :content="item.title" placement="right" effect="light">
            <span>{{ truncateLabel(item.title) }}</span>
          </el-tooltip>
          <!-- 否则直接显示完整标题 -->
          <span v-else>{{ item.title }}</span>
      </template>
    </el-tab-pane>
    </el-tabs>

    <!-- 下拉菜单 -->
    <span class="tag-btn">
      <el-dropdown @command="handleClose">
        <span class="el-dropdown-link">
          <el-icon>
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
            <el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>

  <!-- 占位,页面大标题 -->
  <div style="height: 44px"></div>
</template>

<script setup>
import { useTabList } from '~/composables/useTabList.js';

// 使用 useTabList 的逻辑
const { activeTab, tabList, changeTab, removeTab, handleClose } = useTabList();
const truncateLabel = (label) =>{
  return label.length > 5 ? label.slice(0, 5) + '...' : label;
}
</script>

<style scoped>

.f-tag-list {
  @apply fixed bg-gray-100 flex items-center px-2;
  top: 64px;
  right: 0;
  height: 44px;
  z-index: 100;
}

.tag-btn {
  @apply bg-white rounded ml-auto flex items-center justify-center px-2;
  height: 32px;
}

/* 深度选择器修改 el-tabs 样式 */
:deep(.el-tabs__header) {
  border: 0 !important;
  @apply mb-0;
}

:deep(.el-tabs__nav) {
  border: 0 !important;
}

:deep(.el-tabs__item) {
  border: 0 !important;
  height: 32px;
  line-height: 32px;
  @apply bg-white mx-1 rounded;
}

:deep(.el-tabs__nav-next),
:deep(.el-tabs__nav-prev) {
  line-height: 32px;
  height: 32px;
}

:deep(.is-disabled) {
  cursor: not-allowed;
  @apply text-gray-300;
}
</style>